import React, { Component, Fragment } from 'react';
import { Card, Select, Input, Upload, Icon, Button, Form, Modal, message } from 'antd';
import { connect } from 'dva';
import EditPage from '@/components/EditPage';
import AntdForm from '@/components/AntdForm';
import AntdFormItem from '@/components/AntdFormItem';
import AdSelect from '@/components/AdSelect';
import reqwest from 'reqwest';
import prompt from '@/components/Prompt';
import AdButton from '@/components/AdButton';
//import AdModal from '@/components/AdModal';
import { stringify } from 'qs';
import { codes,typeData } from './utils';

import {
  formItemFragement,
} from '@/utils/common';
require('./Leadinport.less')

@connect(({ leadInPort, loading, common }) => ({
  leadInPort,
  getCustomerList: leadInPort.getCustomerList,
  // formValues: leadInPort.formValues,
  // loading: loading.effects[allDispatchType.detail],
}))
@Form.create()
export default class LeadInPort extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: '',
      customerType: [],
      customerInfo: [],
      key: 0,
      fileList: [],
      visible: false,
      messages: [],
      excelUrl: '',
    }
  }
  componentDidMount() {
    // console.log(this.props)

    this.getCustomerInfo()


  }
  componentDidUpdate() {
    // console.log('12',this.state.customer) 
  }
  getCustomerInfo = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'leadInPort/selectCustomerTypes',
      payload: {},
      callback: data => {
        if (!data) return;
        const newData = data.map(v => {
          return { code: v.customer, value: v.customer, types: v.types, excelUrl: v.excelUrl }
        })

        this.setState({
          // customerType:data.types|| [],
          customerInfo: newData
        })
      },
    });
  }
  // 选择客户类型
  handleChange = (e) => {
    // this.props.form.setFieldsValue({ fileTokens: res });
    this.props.form.setFieldsValue({ type: "" });
    const data = this.state.customerInfo.find((v) => e === v.value);
    this.setState({
      customerType: data ? data.types || [] : [],
      excelUrl: '',
    })
  }
  //选择反馈类型
  typesChange = (e) => {
    const selectType = this.state.customerType.find((v) => {
      return e === v.type
    })
    this.setState({
      excelUrl: selectType ? selectType.excelUrl || "" : '',
    })
  }
  // 上传文件
  uploadExcel = (e) => {
    // console.log(e)
    let fileList = this.refs.pathClear.value
    this.setState({
      fileList
    })

  }
  confirm = () => {
    const { fileList } = this.state;
    const {
      form, dispatch
    } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (err) {
        return prompt({ content: "请选择接口信息", type: 'error' });
      }
      const { ...params } = values;
      const formData = new FormData();
      // console.log('fileList--3333',fileList)
      fileList.map((file,index)=> {
        formData.append(`file`, file);
      });
      this.setState({
        uploading: true,
      });
      params.token=localStorage.getItem('token')
      reqwest({
        url: `/server/api/tmw-feedback/insertTmwImageUpload?${stringify(params)}`,
        method: 'post',
        processData: false,
        data: formData,
        headers: {
          token: localStorage.getItem('token'),
        },
        contentType: 'multipart/form-data',
        success: res => {
          const { code, message, data } = res;
          if (code == 0) {
            this.setState({
              messages: data.messages,
              visible: true,
            });
            this.setState({
              fileList: []
            })
          } else {
            prompt({ content: message, type: 'error' });
          }
        },
        error: () => {
          this.setState({
            uploading: false,
          });
          prompt({ content: '上传失败', type: 'error' });
        },
      });
    });

  }
  handleChangeUpdate = (info) => {
    let a=info.file
    let fileListTest = info.fileList.map(v=>{
      v.__proto__=a.__proto__
      return v
    });
    // 1. 限制上传数量
    let _fileList = fileListTest.slice(0, 20);
    this.setState({ fileList: _fileList })

  }
  render() {
    const { customerInfo, customerType, fileList, excelUrl } = this.state;
    // const detail = {};
    const { form } = this.props;
    const commonParams = {
      getFieldDecorator: form.getFieldDecorator,
    };
    // const urlCase=`attachment/${excelUrl}`;  //urlCase={`attachment/轨迹更新导入模板.xlsx`}
    const formItem = [
      [
        <AntdFormItem
          label="类别"
          rules={[{ required: true }]}
          code="type"
          {...commonParams}
        >
          <AdSelect
            isExist={true}
            data={typeData}
            onChange={(e) => this.handleChange(e)}
          />
        </AntdFormItem>,
        <></>
      ]
    ];
    const editPageParams = {
      title: '接口导入',
      // headerOperate: this.headerOperate(),
      panelValue: [{ key: '基础信息' }],
    };
    const propsFile = {
      // 点击移除图标
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      // onChange: this.handleChangeUpdate,
      beforeUpload: file => {
        this.setState(state => ({
          // 显示所有上传的文件 fileList: [...state.fileList, file],
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
      multiple: true,
      // accept: '.xls,.xlsx,.word,.pdf,.mp4,.mp3'
      accept: '.xls,.xlsx,.png,.jpg,.jpeg'
    };
    //   <FileImport
    //   visibleFile={visibleFile}
    //   handleCancel={() => {
    //     this.handleImportFile();
    //   }}
    //   urlImport={`track/track-order/importTrack`}
    //   urlCase={`attachment/轨迹更新导入模板.xlsx`}
    //   // queryData={[this.getSelectList]}
    //   accept=".xls,.xlsx"
    // />
    return (
      <div>
        <EditPage {...editPageParams}>
          <div style={{ marginTop: 80, height: 400 }}>
            <AntdForm>{formItemFragement(formItem)}
              <div style={{ display: 'flex', width: '100%', justifyContent: 'center', marginTop: 40 }}>
                <div style={{ flex: 1, marginLeft: 120, marginRight: 20 }}>
                  {/* {excelUrl && (
                    <div style={{ marginBottom: 16 }}>
                      <a href={`http://${window.location.host}/server/api/template/download?fileName=${excelUrl}&token=${localStorage.getItem('token')}`} download>
                        下载模板
                      </a>
                    </div>
                  )} */}
                  <Upload {...propsFile} >
                    <Button style={{ width: 100 }}>
                      <Icon type="upload" /> 附件
                    </Button>
                    <p style={{ color: 'red', marginTop: 12, marginbottom: 0 }}>
                      （提示：支持 .xls,xlsx,.png,.jpg,.jpeg 格式文件）
                      </p>
                  </Upload>
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', marginTop: 40 }}>
                <AdButton
                  text="确认"
                  type="primary"
                  style={{ width: 200 }}
                  code={codes.confirm}
                  onClick={() => this.confirm()}
                  disabled={!fileList.length}
                />
              </div>
            </AntdForm>
          </div>
        </EditPage>
        <Modal
          visible={this.state.visible}
          title="接口导入"
          onOk={() => {
            this.setState({
              visible: false
            })
          }}
          onCancel={() => {
            this.setState({
              visible: false
            })
          }}
          width="60%"
          style={{
            maxWidth: 600,
          }}
        >
          <div style={{ color: '#262626', }}>
            {
              (this.state.messages || []).map((item, key) => {
                return (
                  <div key={key} style={{ borderBottom: '1px solid #E8E8E8', color: '#000000', marginBottom: 12 }}>{item}</div>
                )
              })
            }
          </div>
        </Modal>
      </div>

    )
  }
}
